<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>外协供应商表</title>
</head>

<body>
  <div id="app">
    <div class="out-supplier" v-loading="loading">
      <el-container style="height:100%;">
        <el-aside class="supplier-form-content" width="30%">
          <div class="form-title">
            外协供应商表
          </div>
          <supplier-form :supplier.sync="supplier" ref="updateSupplierForm" type="update" @add-supplier="openAddSupplierForm" @save-success="updateSupplierSuccess"></supplier-form>
        </el-aside>
        <el-main class="supplier-table-div">
          <div>
            <el-form :model="search" label-width="50px" :inline="true">
              <el-form-item label="状态">
                <el-select v-model="search.status" @change="searchSupplier">
                  <el-option v-for="state in statusList" :key="`state_${state.value}`" :value="state.value" :label="state.label"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="supplier-table-conent">
            <el-table class="supplier-table" fit border stripe :data="supplierList" style="width: 100%" @row-click="toUpdateSupplier"
              height="parent" ref="supplierTable">
              <el-table-column :resizable="false" prop="supplierName" label="供应商名称"></el-table-column>
              <el-table-column :resizable="false" prop="contactUser" label="联系人"></el-table-column>
              <el-table-column :resizable="false" prop="contactPhone" label="联系电话"></el-table-column>
              <el-table-column :resizable="false" label="状态">
                <template slot-scope="scope">
                  <span>{{getStatus(scope.row)}}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-if="pagination.totalCount!==0" style="text-align:right;margin-top:5px;">
            <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
              @current-change="pageChange"></el-pagination>
          </div>
        </el-main>
      </el-container>
    </div>

    <el-dialog title="添加外协供应商" :visible.sync="addSupplierFormDialog" :lock-scroll="true" :show-close="true" top="20px" custom-class="sysAddFormDialog">
      <div style="height: 400px;overflow: auto;" v-if="addSupplierFormDialog">
        <supplier-form ref="addSupplierForm" type="create" @save-success="addSupplierSuccess"></supplier-form>
      </div>
    </el-dialog>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "./css/supplierForm.css"
  ], [
    "/vueSystem/js/checkVaildUtil.js"
  ]);
</script>
<script src="./supplierForm.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      return {
        loading: false,
        addSupplierFormDialog: false,
        supplierList: [],
        search: {
          status: 1
        },
        statusList: [{
          value: '',
          label: '全部'
        }, {
          value: 1,
          label: '使用'
        }, {
          value: 2,
          label: '禁用'
        }],
        supplier: {
          id: '',
          supplierName: '',
          contactUser: '',
          contactPhone: '',
          status: ''
        },
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        }
      };
    },
    created: function () {
      this.setSupplierData();
    },
    methods: {
      setSupplierData: function () {
        var pagination = this.pagination;
        var search = this.search;

        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;

        var postData = {
          start: start,
          length: pageSize
        };

        var status = search.status;
        if (status !== '') {
          postData.status = status;
        }

        this.loading = true;
        var self = this;
        ajaxRequest('putOutNew/getPutoutSupplier', postData).then(function (res) {
          var supplierList = res.returnData;
          for (var i = 0; i < supplierList.length; i++) {
            var supplier = supplierList[i];
            supplier.createTime = Number(supplier.createTime);
            supplier.updateTime = Number(supplier.updateTime);
          }
          self.supplierList = supplierList;

          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      searchSupplier: function () {
        this.setSupplierData();
      },

      pageChange: function () {
        this.setSupplierData();
      },

      toUpdateSupplier: function (selectSupplier) {
        selectSupplier = _.cloneDeep(selectSupplier);
        this.supplier = selectSupplier;
      },

      openAddSupplierForm: function () {
        this.addSupplierFormDialog = true;
      },

      addSupplierSuccess: function () {
        this.addSupplierFormDialog = false;
        this.pagination.currentPage = 1;
        this.setSupplierData();
      },

      updateSupplierSuccess: function () {
        this.setSupplierData();
      },

      getStatus(row) {
        var statusList = {
          '1': '使用',
          '2': '禁用'
        };

        var status = statusList[row.status];
        if (status === undefined) {
          return '';
        }
        return status;
      }
    },
    components: {
      SupplierForm: SupplierForm
    }
  });
</script>
<style>
  .out-supplier {
    width: 100%;
    height: 100%;
    min-width: 400px;
  }

  .out-supplier .supplier-form-content,
  .out-supplier .supplier-table-div {
    overflow: auto;
    min-width: 300px;
  }

  .out-supplier .supplier-table-div {
    display: flex;
    flex-direction: column;
    padding: 10px 20px;
  }

  .out-supplier .supplier-table-div .el-form-item {
    margin-bottom: 10px;
  }

  .out-supplier .supplier-table-div .supplier-table-conent {
    flex: 1;
    overflow: auto;
  }

  .out-supplier .supplier-form-content {
    border-right: 1px solid #cccccc;
    padding: 5px;
    padding-right: 0;
  }

  .out-supplier .supplier-form-content .form-title {
    font-size: 20px;
    height: 50px;
    line-height: 40px;
    padding-left: 20px;
  }
</style>

</html>